<template>
    <div>
        <el-form label-width="auto">
            <el-form-item label="工序名">
                <el-input v-model="modelValue.ProcedureName"></el-input>
            </el-form-item>
            <el-form-item label="负责人">
                <UserSelect v-model="modelValue.Employee" placeholder="请选择负责人" />
            </el-form-item>
            <el-form-item label="选择时间区">
                <el-date-picker v-model="dateProp" type="daterange" range-separator="至"
                    start-placeholder="开始时间" end-placeholder="结束时间"/>
            </el-form-item>
            <el-form-item label="工序注意事项">
                <el-input type="textarea" v-model="modelValue.Desc" placeholder="工序注意事项" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
    import { computed, reactive, ref } from 'vue';
    import UserSelect from '../../components/UserSelect.vue';

    const modelValue = defineModel<any>()

    const dateProp = computed({
        get:()=>{
            return [modelValue.value.BeginDate,modelValue.value.EndDate]
        },
        set:(dates)=>{
            modelValue.value.BeginDate=dates[0]
            modelValue.value.EndDate=dates[1]
        }
    })

</script>

<style scoped></style>